<!--登录页面-->
<template>
  <div>
    <t-navbar title="登录" :fixed="false" left-arrow @left-click="handleClick" />
  </div>
  <div style="margin-top: 30%">
    <t-avatar
        class="avatar-example"
        image="https://bpic.51yuansu.com/pic3/cover/01/88/29/5981e80be09db_610.jpg?x-oss-process=image/sharpen,100"
        shape="circle"
        size="100px"
    ></t-avatar>
    <h2>登录</h2>
    <t-tabs :value="currentValue" :list="list" @change="changeTab"></t-tabs>
    <!--        账号登录-->
    <div v-if="currentValue==1">
      <div>
        <t-input label="手机" v-model="user.phone" type="number" placeholder="请输入手机号"></t-input>
      </div>
      <div>
        <t-input label="密码" v-model="user.password" type="password" placeholder="请输入密码"></t-input>
      </div>
      <div style="margin-top: 20px">
        <t-button size="large" theme="light" @click="login" block>登录账号</t-button>
      </div>
    </div>
    <!--短信登录-->
    <div v-else>
      <div>
        <t-input label="手机" v-model="userCode.phone" placeholder="请输入手机号">
          <template #suffix>
            <div class="suffix">
              <div class="suffix--line"></div>
              <label style="color: #747bff" @click="sendCode">发送验证码</label>
            </div>
          </template>
        </t-input>
      </div>
      <div>
        <t-input label="验证码" v-model="userCode.code" type="number" placeholder="请输入验证码"></t-input>
      </div>
      <div style="margin-top: 20px">
        <t-button size="large" theme="light" @click="loginCode" block>验证码登录</t-button>
      </div>
    </div>

    <!--  其他导航-->
    <div style="margin-top: 20px;">
      <div style="float: left">
        <router-link style="color: grey;font-size: 12px;" to="/register">没有账号点击注册</router-link>
      </div>
      <div style="float: right">
        <router-link style="color: grey;font-size: 12px;" to="/findPass">忘记密码点击找回</router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {useRouter} from "vue-router";
import {get,post} from "../util/Request.js";
import {Toast} from "tdesign-mobile-vue";

const handleClick = () => {
  // localStorage.setItem("id",typeId)
  window.history.back() // 返回上一级页面
};
//属性 定义
const currentValue = ref('1');
const router=useRouter()
const list = [
  {
    value: '1',
    label: '账号登录'
  },
  {
    value: '2',
    label: '短信登录'
  }
];
//属性 账号登录 对象
const user=ref({
  phone:"",
  password:""
})
// 属性 短信登录 对象
const userCode=ref({
  phone:"",
  code:""
})
//函数 定义
const changeTab=(val)=>{
  //切换
  currentValue.value = val;
}
const sendCode=()=>{
  //发送验证 请求接口
  get("/tbUser/sendlcode?phone="+userCode.value.phone).then(r=>{
    if(r.code==0){
      console.log(r.data)
      Toast("发送成功，请查阅手机")
    }else{
      Toast(r.data)
    }
  })
}
const login=()=>{
  //账号登录 请求接口
  post("/tbUser/login",user.value).then(r=>{
    if(r.code==0){
      //登录成功 存储令牌和用户信息
      //localStorage.setItem 存储字符串
      localStorage.setItem("token",r.data.token);
      localStorage.setItem("user",JSON.stringify(r.data.user))
      //跳转到 首页
      router.push("/")
    }else{
      Toast(r.data)
    }
  })
}
const loginCode=()=>{
  //短信登录 请求接口
  //账号登录 请求接口
  post("/tbUser/logincode",userCode.value).then(r=>{
    if(r.code==0){
      //登录成功 存储令牌和用户信息
      //localStorage.setItem 存储字符串
      localStorage.setItem("token",r.data.token);
      localStorage.setItem("user",JSON.stringify(r.data.user))
      //跳转到 首页
      router.push("/Home")
    }else{
      Toast(r.data)
    }
  })
}
</script>

<style scoped>

</style>